<template>
  <div class="main">
    <div class="main-container">
      <div class="side-menu">
        <a-spin :spinning="spinning" tip="正在加载...">
          <a-menu
          style="width: 172px; min-height: 100px;"
          mode="vertical"
          theme="dark"
          :items="site_items"
          @select="on_select_menu_item"
        />
        </a-spin>
        
        <div class="side-menu-opts"></div>
      </div>
      <div class="website-config">
        <a-tabs
          v-model:activeKey="activeTab"
          type="card"
          class="website-config-tab"
          :destroyInactiveTabPane="true"
          @change="handleTabChange"
        >
          <a-tab-pane
            key="categoryScript"
            tab="站点类目提取脚本"
            class="tab-pane"
          >
            <set-category-script
              @switch_tab="switch_tab"
              :current_site="current_site"
              ref="categoryScript"
            />
          </a-tab-pane>
          <a-tab-pane
            key="conditionScript"
            tab="搜索条件提取脚本"
            class="tab-pane"
          >
            <set-condition-script
              @switch_tab="switch_tab"
              :current_site="current_site"
              ref="conditionScript"
            />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Spin,
  Menu,
  Tabs,
  TabPane,
  Button,
  Modal,
  Form,
  Input,
  FormItem,
  Popconfirm,
} from "ant-design-vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import SetCategoryScript from "@/components/site_settings/SetCategoryScript.vue";
import SetConditionScript from "@/components/site_settings/SetConditionScript.vue";
import { fetch_all_site_scripts } from "@/utils/storage.js";
import { message } from "ant-design-vue";

/* eslint-disable no-debugger */
export default {
  name: "SettingsPage",
  props: {},
  data() {
    return {
      current_site: "",
      activeTab: "categoryScript",
      site_items: [],
      spinning: false
    };
  },
  async mounted() {
    try {
      this.spinning = true
      let res = await fetch_all_site_scripts();
      // console.log("res ->", res);
      this.site_items = res.map((item) => {
        return {
          key: item.websiteCode,
          label: item.websiteName,
          title: item.websiteName,
        };
      });
    } catch (err) {
      message.error("拉取最新站点脚本失败");
    } finally{
      this.spinning = false;
    }
  },
  components: {
    ASpin: Spin,
    AButton: Button,
    AMenu: Menu,
    ATabs: Tabs,
    ATabPane: TabPane,
    AModal: Modal,
    AForm: Form,
    AInput: Input,
    AFormItem: FormItem,
    APopconfirm: Popconfirm,
    SetCategoryScript,
    SetConditionScript,
    AQuestionCircleOutlined: QuestionCircleOutlined,
  },
  methods: {
    async on_select_menu_item({ key }) {
      this.current_site = key;
      await this.handleTabChange(this.activeTab);
    },
    async switch_tab(target_tab) {
      this.activeTab = target_tab;
      await this.handleTabChange(target_tab);
    },
    async handleTabChange(key) {
      // console.log("refs ->", this.$refs);
      // console.log("switch to tab key ->", key);
      if (this.$refs[key]) {
        console.log("current site ->", this.current_site);
        setTimeout(async () => {
          // 不加延迟会导致切换时 current_site 为上一个值
          // 原因不明，可能是 props 的值更新传递有延迟
          await this.$refs[key].reload();
        }, 100);
      }
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

  .nav {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    max-height: 50px;

    .nav_logo {
      font-weight: bold;
      font-size: 1.2rem;
      color: #333333;
      width: 200px;
    }

    .nav_home {
      cursor: pointer;
    }
  }

  .main-container {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;

    .side-menu {
      max-width: 180px;
      padding-top: 10px;
      background-color: #001529;
      flex-grow: 1;
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .side-menu-opts {
        display: flex;
        flex-direction: column;
        padding: 8px;
        gap: 8px;
      }
    }

    .website-config {
      flex: 1;
      padding: 15px 20px;

      .website-config-tab {
        width: 100%;
        height: 100%;

        .tab-pane {
          width: 100%;
          height: calc(100vh - 100px);
        }
      }
    }
  }
}
</style>
